import React, { Component } from 'react';
import './search.css';
import { Input, Tabs, Icon, Radio } from 'antd';
import Weblist from '../weblist/weblist';

const Search = Input.Search;
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;
const data = require('./data.json')
/**
 * 搜索组件
 */
class SearchIndex extends Component {
    state = {
        webTab: 1,
        searchValue: '',
        doing: false,
        display: false
    }

    componentDidMount() {
        document.body.addEventListener("compositionstart", (e: any) => {

            this.setState({
                doing: false
            })
            console.log(this.state.doing)
        })


        document.body.addEventListener("compositionend", (e: any) => {
            this.setState({
                doing: true
            })
            console.log(this.state.doing)
        })

        document.body.addEventListener("keyup", (e: any) => {
            if (window.event) {
                e = window.event;
            }
            let code = e.charCode || e.keyCode
            if (code === 13 && !this.state.doing && this.state.searchValue.length > 0) {
                this.search(this.state.searchValue)
            }
        })
    }

    inputOnBlur = () => {
        this.setState({
            doing: false,
            display: false
        })
    }
    inputOnfocus = () => {
        this.setState({
            display: true
        })
    }


    setSearchValue = (value: any) => {
        this.setState({
            searchValue: value.target.value
        })
    }
    // 搜索网址匹配
    search = (value: any) => {
        let url = ``;
        value = encodeURIComponent(value);
        switch (this.state.webTab) {
            case 1:
                url = "https://magi.com/search?q=" + value;
                break;
            case 2:
                url = "https://www.google.com/search?q=" + value;
                break;
            case 3:
                url = "https://cn.bing.com/search?q=" + value;
                break;
            case 4:
                url = "https://www.sogou.com/web?query=" + value;
                break;
            case 5:
                url = "https://www.baidu.com/s?ie=UTF-8&wd=" + value;
                break;
            default:
                url = "https://www.baidu.com/s?ie=UTF-8&wd=" + value;
                break;
        }
        window.open(url)
    }

    onChange = (e: any) => {
        console.log('radio checked', e.target.value);
        this.setState({
            webTab: e.target.value,
        });
    }

    render() {
        const divDisplay = {
            display: this.state.display ? 'block' : 'none'
        }
        return (
            <div className="search_context">
                <div className="search">
                    <div className="search_tab">
                        <RadioGroup size="large" buttonStyle="solid" onChange={this.onChange} value={this.state.webTab} >
                            <Radio value={1} checked={true}>Magi</Radio>
                            <Radio value={2}>谷歌</Radio>
                            <Radio value={3}>必应</Radio>
                            <Radio value={5}>百度</Radio>
                        </RadioGroup>
                    </div>
                    {/* 蒙版div */}
                    <div id="popWindow" className="popWindow" style={divDisplay}>
                    </div>
                    <div className="maskLayer">
                        <Search
                            placeholder="you like sing dance rap basketball"
                            enterButton="Search"
                            size="large"
                            onChange={value => this.setSearchValue(value)}
                            onSearch={value => this.search(value)}
                            onBlur={this.inputOnBlur}
                            onFocus={this.inputOnfocus}
                        />
                    </div>
                </div>
                <div className="web_list">
                    <div className="tabs">
                        <Tabs defaultActiveKey="1"
                            tabPosition="top"
                            style={{ height: '100%' }}>
                            {
                                data.map(function (data: any, index: any) {
                                    return <TabPane tab={<span><Icon type={data.tab.icon} theme="filled"/>
                                        {data.tab.tab_name}</span>} key={data.tab.index}>
                                        <Weblist item={data.item} />
                                    </TabPane>
                                })
                            }
                        </Tabs>
                    </div>
                </div>
            </div>
        );
    }
}

export default SearchIndex;